<template>
    <div class="login-container">
        <div class="login-weaper animated bounceInDown">
            <div class="login-left">
                <div class="login-time">
                    {{time}}
                </div>
                <img class="img"
                     src="static/images/login_Logo.png"
                     alt="">
                <p class="title">智慧酒店后台管理系统</p>
            </div>
            <div class="login-border">
                <div class="login-main">
                    <h4 class="login-title">
                        欢迎登录
                    </h4>
                    <div>
                        <Form ref="loginForm" :model="form" :rules="rules">
                            <FormItem prop="userName" label="账户名称">
                                <Input size="large" v-model="form.userName" placeholder="请输入用户名">
                                </Input>
                                <div class="boder"></div>
                            </FormItem>
                            <FormItem prop="password" style="margin-top: 15px" label="登录密码">
                                <Input size="large" type="password" v-model="form.password" placeholder="请输入密码">
                                </Input>
                                <div class="boder"></div>
                            </FormItem>
                            <FormItem style="margin-top: 60px">
                                <Button size="large" @click.native="handleSubmit" type="primary" class="login-submit"
                                        :loading="loading" long>点击登录
                                </Button>
                            </FormItem>
                        </Form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: "login",
        components: {},
        data() {
            return {
                time: "",
                loading: false,
                functionList: [],
                form: {
                    userName: '',
                    password: ''
                },
                rules: {
                    userName: [
                        {required: true, message: '账号不能为空', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '密码不能为空', trigger: 'blur'}
                    ]
                }
            };
        },
        created() {
            this.getTime();
        },
        mounted() {
        },
        props: [],
        methods: {
            getTime() {
                setInterval(() => {
                    this.time = new Date().format("yyyy-MM-dd hh:mm:ss");
                }, 1000);
            },
            handleSubmit() {
                //判断输入是否为空
                if(!this.form.userName){
                    return
                }else if(!this.form.password){
                    return;
                }

                this.loading = true;
                this.$refs.loginForm.validate((valid) => {
                    if (valid) {
                        var options = {
                            'account': this.form.userName,
                            'password': this.form.password
                        };
                        window.$localStorage.setItem('formUserName', this.form.userName);
                        this.$http.post('/admin/adminLogin', this.common.request(options))
                            .then(response => {
                                this.loading = false;
                                if (response.data.code == 200) {
                                    window.$localStorage.setItem('name', response.data.data.name);
                                    window.$localStorage.setItem('account', this.form.userName);
                                    window.$localStorage.setItem('saToken', response.data.data.saToken);
                                    window.$localStorage.setItem("adminId", response.data.data.adminId);
                                    this.$store.commit('setAvator', 'http://huayuyicheng.oss-cn-beijing.aliyuncs.com/admin/036da0c5-6a9a-46bc-ae26-3437c5e864b0_file?Expires=3189057792&OSSAccessKeyId=LTAI4GCgVo5hfzdEqwYNXv1g&Signature=mMWK2RKrOou9GMQiMl7jpuUbhc4%3D');
                                    this.$router.push({
                                        name: 'room'
                                    });
                                } else {
                                    this.$Message.error(response.data.msg);
                                    window.$localStorage.removeItem('name');
                                    window.$localStorage.removeItem('account');
                                    window.$localStorage.removeItem('adminId');
                                    window.$localStorage.removeItem('saToken');
                                }
                            }, response => {
                                this.loading = false;
                                console.log(response);
                                this.$Message.error(response.data.msg);
                                window.$localStorage.removeItem('name');
                                window.$localStorage.removeItem('account');
                                window.$localStorage.removeItem('saToken');
                                window.$localStorage.removeItem('adminId');
                            })
                    }
                });
            }
        }
    };
</script>

<style lang="less">
    @import "./login.less";
    @import "./animate.css";
</style>
